<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.global.js"></script>
	</head>
	<style>
			body{
				background-color: #f5f5f5;
			}
			#app{
				background-color: #fff;
				width: 400px;
				/* border: 1px solid #999; */
				margin: 10px auto;
				padding: 20px;
				box-shadow: 0 0 10px 1px #999;
			}
			label{
				font-size: 20px;
			}
			input{
				height: 35px;
				margin: 10px;
				border: 2px solid #999;
				border-radius: 3px;
				padding: 0 10px;
				outline: none;
				font-size: 16px;
			}
			span{
				color: red;
				font-weight: 600;
			}
			p{
				font-size: 18px;
				line-height: 45px;
				color: #666;
			}
			i{
				color: blue;
			}
	</style>
	<body>
			<div id='app'>
				<h3 align='center'>黄金价格计算器</h3>
				<label>买入单价：</label>
				<input v-model.number="buyPrice" type="number"> 
				<span>元/克</span> <br>
				<label>卖出单价：</label>
				<input v-model.number="sellPrice" type="number"> 
				<span>元/克</span> <br>
				<label>手续费率：</label>
				<input v-model.number="feeRate"  type="number"> 
				<span>%</span> <br>
				<label>购买数量：</label>
				<input v-model.number="quantity"  type="number"> 
				<span>克</span> <br>
				<hr>
				<p>
					成本价： <i> {{costPrice.toFixed(2)}}</i>元 <br>
					卖出价：<i> {{sellValue.toFixed(2)}}</i>元<br>
					手续费：<i>{{fee.toFixed(2)}} </i><br>
					赎回获得：<i> {{netSellValue.toFixed(2)}}</i>元<br>
					净收入：<i>{{netIncome.toFixed(2)}} </i>元
				</p>

			<hr>
			人民币：<input type="number" v-model.number="cny"><br>
			<b>美元:{{dollar}}</b><br>
			<b>日元:{{jpy}}</b><br>
			<b>英镑:{{gbp}}</b><br>
			<b>韩元:{{krw}}</b><br>
			<b>欧元:{{eur}}</b><br>
			</div>
			<script>
				Vue.createApp({
					data(){
						return{
							cny: '', // 人民币
                            usd: '', // 美元
                            jpy: '', // 日元
                            gbp: '', // 英镑
                            krw: '', // 韩元
                            eur: '', // 欧元
							buyPrice: 0,   // 买入单价
							sellPrice: 0,  // 卖出单价
							feeRate: 0.3,    // 手续费率
							quantity: 0    // 购买数量
						}
					},
					watch:{ /// 监听
						cny(newValue, oldValue){  //监听人民币跟新其他币种
							this.dollar = (newValue*0.1382).toFixed(2),
							this.jpy = (newValue*20).toFixed(2),
							this.gbp = (newValue*0.11).toFixed(2),
							this.krw = (newValue*200).toFixed(2),
							this.eur = (newValue*0.13).toFixed(2)
						}
					},
					computed:{
						costPrice() {  // 成本价
							return this.buyPrice * this.quantity;
						},
						sellValue() {  // 卖出价
							return this.sellPrice * this.quantity;
						},
						fee() {  // 手续费
							return this.sellValue * (this.feeRate / 100);
						},
						netSellValue() {  // 赎回获得
							return this.sellValue - this.fee;
						},
						netIncome() {  // 净收入
							return this.netSellValue - this.costPrice;
						}
					}
				}).mount('#app')
			</script>
	</body>
</html>